﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>易淘商城--购物车页面</title>

    <link rel="stylesheet" type="text/css" href="css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-cart.css" />
</head>

<body>

    <div id="cartApp">

        <div class="top">
            <shortcut />
        </div>

        <div class="cart py-container">

            <!--logoArea-->
            <div class="logoArea">
                <a href="index.html"><div class="fl logo"><span class="title">购物车</span></div></a>
            </div>

            <!--All goods-->
            <div class="allgoods">
                <h4>全部商品</h4>
                <div class="cart-main">
                    <div class="yui3-g cart-th">
                        <div class="yui3-u-1-4"><input ref="selectAllTop" type="checkbox" @click="selectAll()" /> 全部</div>
                        <div class="yui3-u-1-4">商品</div>
                        <div class="yui3-u-1-8">单价（元）</div>
                        <div class="yui3-u-1-8">数量</div>
                        <div class="yui3-u-1-8">小计（元）</div>
                        <div class="yui3-u-1-8">操作</div>
                    </div>
                    <div class="cart-item-list">

                        <div class="cart-body">
                            <div class="cart-list">
                                <ul class="goods-list yui3-g" v-for="(cart,i) in carts" :key="i">
                                    <li class="yui3-u-1-24">
                                        <input type="checkbox" @click="selectSingle()" v-model="selected" :value="cart" />
                                    </li>
                                    <li class="yui3-u-11-24">
                                        <div class="good-item">
                                            <div class="item-img"><img :src="cart.image" width="80px" height="80px" /></div>
                                            <div class="item-msg">
                                                <span style="line-height:23px">
                                                    {{cart.title | ellipsis}}<br />
                                                    <span v-for="(v,k) in cart.ownSpec" :key="k">
                                                        {{k}}:<span style="color: #c81623;">
                                                            {{v}}<span>
                                                                <br />
                                                            </span>
                                                        </span>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="yui3-u-1-8"><span style="line-height:70px " class="price">{{yt.formatPrice(cart.price)}}</span></li>
                                    <li class="yui3-u-1-8" style="padding-top: 20px">
                                        <a href="javascript:void(0)" class="increment mins" @click="decrement(cart)">-</a>
                                        <input autocomplete="off" type="text" v-model="cart.num" minnum="1" class="itxt" />
                                        <a href="javascript:void(0)" class="increment plus" @click="increment(cart)">+</a>
                                    </li>
                                    <li class="yui3-u-1-8"><span style="line-height:70px " class="sum">{{yt.formatPrice(cart.price*cart.num)}}</span></li>
                                    <li class="yui3-u-1-8">
                                        <a href="#none" @click="deleteCart(i)">删除</a><br />
                                        <a href="#none">移到我的关注</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="cart-tool">
                    <div class="select-all">
                        <input type="checkbox" @click="selectAll" ref="selectAllBottom" />
                        <span>全选</span>
                    </div>
                    <div class="option">
                        <a href="#none">删除选中的商品</a>
                        <a href="#none">移到我的关注</a>
                        <a href="#none">清除下柜商品</a>
                    </div>
                    <div class="toolbar">
                        <div class="chosed">已选择<span>{{totalNum}}</span>件商品</div>
                        <div class="sumprice">
                            <span><em>总价（不含运费） ：</em><i class="summoney">{{totalPrice}}</i></span>
                            <!--<span><em>已节省：</em><i>-¥20.00</i></span>-->
                        </div>
                        <div class="sumbtn">
                            <a class="sum-btn" @click.prevent="toOrderInfo" target="_blank">结算</a>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
                <!--<div class="deled">
                    <span>已删除商品，您可以重新购买或加关注：</span>
                    <div class="cart-list del">
                        <ul class="goods-list yui3-g">
                            <li class="yui3-u-1-2">
                                <div class="good-item">
                                    <div class="item-msg">Apple Macbook Air 13.3英寸笔记本电脑 银色（Corei5）处理器/8GB内存</div>
                                </div>
                            </li>
                            <li class="yui3-u-1-6"><span class="price">8848.00</span></li>
                            <li class="yui3-u-1-6">
                                <span class="number">1</span>
                            </li>
                            <li class="yui3-u-1-8">
                                <a href="#none">重新购买</a>
                                <a href="#none">移到我的关注</a>
                            </li>
                        </ul>
                    </div>
                </div>-->
                <div class="liked">
                    <ul class="sui-nav nav-tabs">
                        <li class="active">
                            <a href="#index" data-toggle="tab">猜你喜欢</a>
                        </li>
                        <li>
                            <a href="#profile" data-toggle="tab">特惠换购</a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                    <div class="tab-content">
                        <div id="index" class="tab-pane active">
                            <div id="myCarousel" data-ride="carousel" data-interval="4000" class="sui-carousel slide">
                                <div class="carousel-inner">
                                    <div class="active item">
                                        <ul>
                                            <li>
                                                <img src="img/like1.png" />
                                                <div class="intro">
                                                    <i>Apple苹果iPhone 6s (A1699)</i>
                                                </div>
                                                <div class="money">
                                                    <span>$29.00</span>
                                                </div>
                                                <div class="incar">
                                                    <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default">
                                                        <i class="car"></i><span class="cartxt">加入购物车</span>
                                                    </a>
                                                </div>
                                            </li>
                                            <li>
                                                <img src="img/like2.png" />
                                                <div class="intro">
                                                    <i>Apple苹果iPhone 6s (A1699)</i>
                                                </div>
                                                <div class="money">
                                                    <span>$29.00</span>
                                                </div>
                                                <div class="incar">
                                                    <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default">
                                                        <i class="car"></i><span class="cartxt">加入购物车</span>
                                                    </a>
                                                </div>
                                            </li>
                                            <li>
                                                <img src="img/like3.png" />
                                                <div class="intro">
                                                    <i>Apple苹果iPhone 6s (A1699)</i>
                                                </div>
                                                <div class="money">
                                                    <span>$29.00</span>
                                                </div>
                                                <div class="incar">
                                                    <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default">
                                                        <i class="car"></i><span class="cartxt">加入购物车</span>
                                                    </a>
                                                </div>
                                            </li>
                                            <li>
                                                <img src="img/like4.png" />
                                                <div class="intro">
                                                    <i>Apple苹果iPhone 6s (A1699)</i>
                                                </div>
                                                <div class="money">
                                                    <span>$29.00</span>
                                                </div>
                                                <div class="incar">
                                                    <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default">
                                                        <i class="car"></i><span class="cartxt">加入购物车</span>
                                                    </a>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="item">
                                        <ul>
                                            <li>
                                                <img src="img/like1.png" />
                                                <div class="intro">
                                                    <i>Apple苹果iPhone 6s (A1699)</i>
                                                </div>
                                                <div class="money">
                                                    <span>$29.00</span>
                                                </div>
                                                <div class="incar">
                                                    <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default">
                                                        <i class="car"></i><span class="cartxt">加入购物车</span>
                                                    </a>
                                                </div>
                                            </li>
                                            <li>
                                                <img src="img/like2.png" />
                                                <div class="intro">
                                                    <i>Apple苹果iPhone 6s (A1699)</i>
                                                </div>
                                                <div class="money">
                                                    <span>$29.00</span>
                                                </div>
                                                <div class="incar">
                                                    <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default">
                                                        <i class="car"></i><span class="cartxt">加入购物车</span>
                                                    </a>
                                                </div>
                                            </li>
                                            <li>
                                                <img src="img/like3.png" />
                                                <div class="intro">
                                                    <i>Apple苹果iPhone 6s (A1699)</i>
                                                </div>
                                                <div class="money">
                                                    <span>$29.00</span>
                                                </div>
                                                <div class="incar">
                                                    <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default">
                                                        <i class="car"></i><span class="cartxt">加入购物车</span>
                                                    </a>
                                                </div>
                                            </li>
                                            <li>
                                                <img src="img/like4.png" />
                                                <div class="intro">
                                                    <i>Apple苹果iPhone 6s (A1699)</i>
                                                </div>
                                                <div class="money">
                                                    <span>$29.00</span>
                                                </div>
                                                <div class="incar">
                                                    <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default">
                                                        <i class="car"></i><span class="cartxt">加入购物车</span>
                                                    </a>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
                                <a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
                            </div>
                        </div>
                        <div id="profile" class="tab-pane">
                            <p>特惠选购</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script src="./js/vue/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/common.js"></script>
    <script type="text/javascript">
var cartVm = new Vue({
            el: "#cartApp",
            data: {
                yt,
                carts: [], //购物车数据
                selected: [] //记录选中的商品
            }, // 标题长度的过滤器
            filters: {
                ellipsis(value) {
                    if (!value) return ''
                    if (value.length > 43) {
                        return value.slice(0, 43) + '...'
                    }
                    return value
                }
            },
            components: {
                shortcut: () => import("/js/pages/shortcut.js")
            },
            created() {
                this.loadCarts();
            },
            computed: {
                totalPrice() {
                    return yt.formatPrice(this.selected.reduce((c1, c2) => c1 + c2.num * c2.price, 0))
                },

                totalNum() {
                    return this.selected.reduce((c1, c2) => c1 + c2.num, 0);
                }
            },
            methods: {
                loadCarts() {
                    yt.verifyUser().then(res => {  //1.先判断登录状态
                        if (res.data.result) {//1 登陆后同步
                            this.carts = yt.store.get("carts") || []; // 获取本地购物数据
                            if (this.carts.length > 0) {
                                yt.http.post("/cart/batch", this.carts)// 添加到添加到购物车
                                    .then(resp => {
                                        if (resp.data.result) {// 清空本地购物车数据
                                            yt.store.del("carts");
                                        }
                                        else {
                                            alert("本地购物车同步失败" + resp.data.message);
                                        }
                                    });
                            }
                            //2.登录后获取
                            yt.http.get("/cart/list").then(respList => {
                                this.carts = respList.data.value;
                                this.carts.forEach(s => {
                                    s.ownSpec = eval("(" + s.ownSpec + ")");
                                });
                                this.selected = this.carts;
                                this.$refs.selectAllTop.checked = true;
                                this.$refs.selectAllBottom.checked = true;
                            }).catch(() => {
                                console.log("查询失败")
                            })
                        }
                        else {
                            //3.未登陆
                            this.carts = yt.store.get("carts") || [];
                            this.carts.forEach(s => {
                                s.ownSpec = eval("(" + s.ownSpec + ")");
                            });
                            this.selected = this.carts;
                            this.$refs.selectAllTop.checked = true;
                            this.$refs.selectAllBottom.checked = true;
                        }
                    }).catch(() => {
                        alert("请求异常");
                    })
                },
                increment(c) {
                    c.num++;
                    yt.verifyUser().then(res => {
                        if (res.data.result) {
                            //已经登录，向后台发起请求
                            yt.http.put("/cart/update", yt.stringify({ id: c.skuId, num: c.num })).then(resUpdate => {
                                if (resUpdate.data.result) {
                                    console.log("increment succeed");
                                }
                                else {
                                    alert("increment failed " + resUpdate.result.message);
                                }
                            })
                        }
                        else {
                            //未登录，直接操作本地数据库
                            yt.store.set("carts", this.carts);
                        }
                    }).catch(() => {
                        alert("请求异常");
                    })
                },
                decrement(c) {
                    if (c.num <= 1) {
                        return;
                    }
                    c.num--;
                    yt.verifyUser().then(res => {
                        if (res.data.result) {
                            //已经登录，向后台发起请求
                            yt.http.put("/cart/update", yt.stringify({ id: c.skuId, num: c.num })).then(resUpdate => {
                                if (resUpdate.data.result) {
                                    console.log("decrement succeed");
                                }
                                else {
                                    alert("decrement failed " + resUpdate.result.message);
                                }
                            })
                        }
                        else {
                            //未登录，直接操作本地数据库
                            yt.store.set("carts", this.carts);
                        }
                    }).catch(() => {
                        alert("请求异常");
                    })
                },
                deleteCart(i) {
                    yt.verifyUser().then(res => {
                        if (res.data.result) {
                            //已经登录，向后台发起请求
                            yt.http.delete("/cart/" + this.carts[i].skuId).then(resDelete => {
                                if (resUpdate.data.result) {
                                    this.carts.splice(i, 1);
                                    console.log("delete succeed");
                                }
                                else {
                                    alert("delete failed " + resUpdate.result.message);
                                }
                            });
                        }
                        else {
                            //未登录，直接操作本地数据库
                            this.carts.splice(i, 1);
                            yt.store.set("carts", this.carts);
                        }
                    }).catch(() => {
                        alert("请求异常");
                    })
                },
                selectAll() {
                    if (this.selected.length !== yt.store.get("carts").length) {
                        this.selected = this.carts;
                    } else {
                        this.selected = [];
                    }
                },
                selectSingle() {
                    if (this.selected.length !== yt.store.get("carts").length - 1) {
                        this.$refs.selectAllTop.checked = false;
                        this.$refs.selectAllBottom.checked = false;
                    } else {
                        this.$refs.selectAllTop.checked = true;
                        this.$refs.selectAllBottom.checked = true;
                    }
                },
                toOrderInfo() {
                    //1.判断是否登录
                    yt.verifyUser().then(res => {
                        if (res.data.result) {
                            //2.已登录
                            //2.1 保存已经选购的购物车记录到localStorage
                            yt.store.set("selectedCarts", this.selected);
                            //2.2 跳转到订单页面
                            window.location.href = "/getOrderInfo.html";
                        }
                        else {
                            //3.未登录
                            window.location.href = "/login.html?returnUrl=" + window.location.href;
                        }
                    }).catch(() => {
                        alert("请求异常");
                    })
                }

            }
        })
    </script>
    <!-- 底部栏位 -->
    <!--页面底部，由js动态加载-->
    <script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
    <div class="clearfix footer"></div>
    <script type="text/javascript">$(".footer").load("foot.html");</script>
    <!--页面底部END-->
    <script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
    <script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
    <script type="text/javascript" src="js/widget/nav.js"></script>

</body>

</html>
